<script setup lang="ts">
// 加载通知数据
import { getNotificationList } from '@/api/notification'

import { markNotificationAsRead } from '@/api/notification'

import { onMounted, ref } from 'vue'

// 分类数据
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '系统通知' },
  { id: 2, name: '借阅通知' },
  { id: 3, name: '互动通知' },
])

// 当前选中的分类
const currentCategory = ref(0)

// 通知列表数据
const notifications = ref([])

// 是否还有更多数据
const hasMore = ref(true)

// 页码
const page = ref(1)

// 选择分类
function selectCategory(categoryId: number) {
  currentCategory.value = categoryId
  page.value = 1
  loadNotifications()
}

// 获取图标类名
function getIconClass(type: string) {
  const iconMap = {
    system: 'icon-notification',
    borrow: 'icon-book',
    interaction: 'icon-comment',
  }
  return iconMap[type] || 'icon-notification'
}

// 跳转到详情页
function goToDetail(notification: any) {
  // 标记为已读
  if (!notification.isRead) {
    notification.isRead = true
    markNotificationAsRead(notification.id)
  }

  // 根据通知类型跳转到不同页面
  switch (notification.type) {
    case 'post_commented':
    case 'post_liked':
      uni.navigateTo({
        url: `/pages/post/detail/index?id=${notification.relatedId}`,
      })
      break
  }
}

async function loadNotifications() {
  try {
    const res = await getNotificationList({
      categoryId: currentCategory.value,
      page: page.value,
      limit: 10,
    })
    if (res.code === 200) {
      notifications.value = page.value === 1 ? res.data.list : [...notifications.value, ...res.data.list]
      hasMore.value = res.data.list.length === 10
    }
    else {
      throw new Error(res.message || '加载失败')
    }
  }
  catch (error) {
    uni.showToast({
      title: error.message,
      icon: 'none',
    })
  }
}

// 加载更多
function loadMore() {
  if (!hasMore.value)
    return
  page.value++
  loadNotifications()
}

// 页面加载时获取数据
onMounted(() => {
  loadNotifications()
})
</script>

<template>
  <view class="container">
    <!-- 分类导航 -->
    <view class="category-nav">
      <view
        v-for="item in categories"
        :key="item.id"
        class="nav-item"
        :class="{ active: currentCategory === item.id }"
        @click="selectCategory(item.id)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 通知列表 -->
    <view class="notification-list">
      <view
        v-for="item in notifications"
        :key="item.id"
        class="notification-item"
        :class="{ unread: !item.isRead }"
        @click="goToDetail(item)"
      >
        <view class="notification-icon" :class="item.type">
          <text class="iconfont" :class="getIconClass(item.type)" />
        </view>

        <view class="notification-content">
          <view class="notification-header">
            <text class="title">
              {{ item.title }}
            </text>
            <text class="time">
              {{ item.createTime }}
            </text>
          </view>
          <text class="content">
            {{ item.content }}
          </text>
        </view>

        <view class="notification-arrow">
          <text class="iconfont icon-arrow-right" />
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="notifications.length === 0" class="empty-tip">
      <text>暂无通知</text>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @click="loadMore">
      <text>加载更多</text>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 20rpx;
}

.category-nav {
  display: flex;
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow-x: auto;

  .nav-item {
    padding: 10rpx 30rpx;
    font-size: 28rpx;
    color: #666;
    background: #f5f5f5;
    border-radius: 28rpx;
    margin-right: 20rpx;
    white-space: nowrap;

    &.active {
      color: #fff;
      background: #4caf50;
    }
  }
}

.notification-list {
  .notification-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;

    &.unread {
      background: #f8f8f8;

      .notification-content {
        .title {
          font-weight: bold;
        }
      }
    }

    .notification-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      &.system {
        background: #e3f2fd;
        color: #2196f3;
      }

      &.borrow {
        background: #e8f5e9;
        color: #4caf50;
      }

      &.interaction {
        background: #fff3e0;
        color: #ff9800;
      }

      .iconfont {
        font-size: 40rpx;
      }
    }

    .notification-content {
      flex: 1;
      margin-right: 20rpx;

      .notification-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .title {
          font-size: 28rpx;
          color: #333;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .content {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }

    .notification-arrow {
      .iconfont {
        font-size: 32rpx;
        color: #999;
      }
    }
  }
}

.empty-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 200rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #666;
  font-size: 28rpx;
}
</style>
